<template>
  <div class="mian">

    <div class="titlebg">
      <img src="../../assets/img/titlebg.png" alt="">
    </div>

    <div class="box">
      <!-- <div class="box-border" v-for="(item, index) in Arrays" :key="index">
        <div style="    border-radius: 17px 0px 0px 16px;overflow: hidden;width: 45.608vw;height: 113px;margin: 9px 0px 0px 9px;">
          <img :src='`${resourceURL}/${item.imageurl}`' alt="">
        </div>
        <div class="box-right">
          <div class="box-right-top">
            <span style="font-weight: bold; margin-bottom: 10px;">{{ item.product_name }}</span>
            <span>剩余：{{ item.stock }}份</span>
          </div>
          <van-button type="primary" @click="onReceive">申请领取</van-button>
        </div>
      </div> -->

      <van-list v-model="loading" :finished="finished" @load="onLoad" :error.sync="err" error-text="加载失败，点击这里重试">
        <div class="goodsList">
          <div class="item" v-for="(item, index) in Arrays" :key="index">
            <div class="goods">

              <van-image width="160" height="120" :src="`${resourceURL}/${item.imageurl}`" fit="cover" />
              <div class="right">
                <div class="top">
                  <div class="name">{{ item.product_name }}x{{ item.stock }}份</div>
                  <div class="count">剩余数量：{{ item.stock - item.salecount }}份</div>
                </div>
                <van-button type="primary" block round @click="onReceive(item)">申请领取</van-button>
              </div>
            </div>

          </div>
        </div>
      </van-list>
      <themeDialog :visible="visible" :title="title">
        <div v-if="obj.code == 1">领取码</div>
        <div>{{ content }}</div>
        <div v-if="obj.code == 1" style="color: #F9A254FF;">请尽快到店领取哦~</div>
        <div class="Tips" v-if="type">
          <van-button type="primary" size="small" round @click="usergetcoupon">确定</van-button>
          <van-button type="primary" size="small" round @click="visible = false">取消</van-button>
        </div>
        <div class="confirm" v-if="!type">
          <van-button type="primary" size="small" round @click="closeDialog">确定</van-button>
        </div>
      </themeDialog>
    </div>

  </div>
</template>

<script>
import themeDialog from "../../components/themeDialog.vue";
export default {
  components: {
    themeDialog
  },
  data () {
    return {
      Arrays: [],
      loading: false,
      finished: false,
      err: false,
      page: 1,
      visible: false,
      type: true,
      item: {},
      title: '提示',
      content: '是否确认要领券？',
      obj: {}
    }
  },
  created () {
    this.loveList()
  },
  methods: {
    // 申请领取
    onReceive (item) {
      this.visible = true
      this.item = item

    },

    usergetcoupon () {
      this.$axios.post(this.$api.uncommonplace, {
        product_id: this.item.product_id,
        stock_id: this.item.p_s_id,
        quantity: 1,
      }).then((res) => {
        this.content = res.data.data.access_code
        this.type = false
        this.obj = res.data

        if (res.data.code == 1) {
          this.title = '领取成功'
        } else {
          this.content = res.data.msg
          this.title = '领取失败'
        }
      })

    },
    //关闭提示
    closeDialog () {
      this.visible = false
      this.title = '提示',
        this.content = '是否确认要领券？'
      this.item = {},
        this.type = true
    },
    //加载下一页
    onLoad () {
      this.page++
      this.loveList()
    },
    // 爱心餐列表
    loveList () {
      this.loading = true
      this.$axios.get(this.$api.getuncommonproduct, {
        params: {
          class_name: "love",
          page: this.page,
        }
      }).then((res) => {
        this.loading = false;

        if (res.data.code == 1) {
          if (res.data.last_page == res.data.current_page) {
            this.finished = true;
          } else {
            this.finished = false;
          }
          this.page = Number(res.data.data.current_page);
          this.Arrays = this.Arrays.concat(res.data.data.data);

        } else {
          this.err = true;
          this.loading = false;
        }

      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-button--primary {
  width: 28.8vw;
  height: 6.93333vw;
  background: #f9c254;
  opacity: 1;
  border-radius: 3.46667vw;
  color: #b60102ff;
  margin: 9px 0 0 9px;
}

.mian {
  min-height: 100%;
  // background: linear-gradient(#D81C1DFF, #B60102FF);
  background: url(../../assets/img/lovebg.png) no-repeat;
  background-color: #b60102;
  background-size: 100%;

  .titlebg {
    img {
      width: 317px;
      height: 60px;
      margin: 82px 29px 0;
    }
  }

  .box {
    height: 100vh;
    margin: 0 20px;

    .Tips {
      display: flex;
    }

    .confirm {
      // display: flex;
      // justify-content: space-between;
      text-align: center;
      width: 100%;
      margin-top: 30px;

      button {
        width: 90px;
        height: 30px;
        background: #f9c254;
        font-size: 12px;
        font-family: Microsoft YaHei;
        border: 1px solid #f9c254;
        color: #b60102;
      }
    }

    .titleImg {
      margin: 30px 0;
    }

    .goodsList {
      width: 329px;
    }

    .item {
      width: 100%;
      background: url(../../assets/img/my/goodsBox.png) no-repeat;
      background-size: cover;
      height: 128px;
      margin-bottom: 14px;
      padding: 7px;
      box-sizing: border-box;

      .goods {
        box-sizing: border-box;
        border-radius: 23px;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        border: 1px solid #f9c254;
        color: #f9c254;
        height: 100%;

        .right {
          background: #b60102;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          .top {
            border-bottom: #f9c254 1px dashed;
            text-align: center;

            .name {
              font-size: 13px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              margin-top: 13px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .count {
              margin: 8px 0;
              font-size: 13px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              text-align: center;
            }
          }
        }
      }
    }
  }

  button {
    margin-top: 8px;
    width: 108px;
    height: 26px;
    background: #f9c254;
    font-size: 14px;
    font-family: Microsoft YaHei;

    color: #b60102;
  }

  /deep/.van-list__finished-text {
    color: #f9c254;
  }

  // .box-border {
  //   display: flex;
  //   height: 36.6vw;
  //   background: url(../../assets/img/borderbg.png) no-repeat;
  //   background-size: 100%;

  //   img {
  //     width: 100%;
  //     height: 100%;
  //     // margin: 8px 0 0 9px;
  //     overflow: hidden;
  //   }

  //   .box-right {
  //     display: flex;
  //     flex-direction: column;
  //     font-size: 3.73333vw;
  //     color: #F9C254FF;
  //     margin-left: 10px;
  //     padding: 0 3.66667vw 0 0;
  //     flex: 1;

  //     .box-right-top {
  //       display: flex;
  //       flex-direction: column;
  //       align-items: center;
  //       border-bottom: 1px dashed;
  //       padding: 25px 0 1.33333vw 0px;
  //     }
  //   }
  // }
}
</style>